<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml"
      layout:decorate="~{commonJs}" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body layout:fragment="content">
<div id="userList">
    <div id="operator" style="padding:0 0 15px 15px">
        <el-button v-on:click="add" type="success" icon="el-icon-circle-plus" round>新增</el-button>
        <el-button type="primary" v-on:click="query" round icon="el-icon-search">搜索</el-button>
        <el-button round @click="resetSearchForm()" icon="el-icon-refresh-left">重置</el-button>
    </div>

    <el-card shadow="never" style="margin-bottom: 20px;" class="box-card">

        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-input placeholder="登录名" v-model="params.loginName"></el-input>
                </div>
            </el-col>

            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-input placeholder="用户名" v-model="params.username"></el-input>
                </div>
            </el-col>

        </el-row>

    </el-card>

    <el-table :data="page.records" style="width: 100%">
        <el-table-column
                label="序号"
                type="index"
                width="70">
        </el-table-column>
        <el-table-column
                label="登录名">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.loginName }}</span>
            </template>
        </el-table-column>
        <el-table-column label="用户名">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.username }}</span>
            </template>
        </el-table-column>
        <el-table-column label="移动电话">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.mobilePhone }}</span>
            </template>
        </el-table-column>
        <el-table-column label="邮箱">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.email }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="edit(scope.$index, scope.row)">编辑
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="block" style="padding: 30px;">
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.current"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total">
        </el-pagination>
    </div>
</div>

<script>
    var vm = new Vue({
        el: '#userList',
        data: function () {
            var res = ajaxPost("/sys/user/listByParams", {});
            return {
                params: {},
                page: res
            }
        },
        methods: {
            edit: function (index, row) {
                ElementUtils.dialog(vm, "修改", "/sys/user/edit", {id: row.id});
            }, add: function () {
                ElementUtils.dialog(vm, "新增", "/sys/user/edit");
            }, handleDelete: function (index, row) {
                ElementUtils.delete(vm, "/sys/user/delete", {id: row.id});
            }, query: function () {
                this.page.current = 1; //查询时默认第一页
                this.refresh();
            }, handleSizeChange(val) {
                this.page.size = val;
                this.page.current = 1;
                this.refresh();
            },
            handleCurrentChange(val) {
                this.page.current = val;
                this.refresh();
            }, refresh: function () {
                const loading = this.$loading();
                this.params.current = this.page.current;
                this.params.size = this.page.size;
                this.page = ajaxPost("/sys/user/listByParams", this.params);
                loading.close();
            },
            resetSearchForm: function () {
                this.params = {};
            }
        }
    })
</script>
</body>
</html>